O mínimo que já resolve: chips, lâminas e o vínculo com o produto
Mantive exatamente a linguagem do arquivo: chips em pílula com a gota cheia, lâminas de cor com a gota vazada no rodapé, moldura laranja na seleção. Saíram a roda e a barra inferior. As famílias quebram linha e as lâminas rolam, então o cliente cadastra quantas quiser sem quebrar o layout. 5a cor → produtos · 5b produto → cores · 5c mobile.
Escolha a cor que te Surpreende.
Cinco lâminas cabem sem rolar; a sexta já sinaliza a rolagem. Os cartões de produto reaproveitam o mesmo desenho da seção de produtos — quem não tem a cor aparece esmaecido, com o motivo escrito.
Cada produto, a sua cartela.
{{ pSelName }}
{{ pSelPath }} · base {{ pSelBase }}
Mesmos componentes, sentido invertido. As famílias que o produto não atende ficam apagadas em vez de sumir — o cliente entende que existem e por que não estão disponíveis ali.
No celular os chips viram uma linha rolável e as lâminas ganham snap — 116px cada, duas e meia visíveis, o que convida a arrastar. Os produtos empilham em linha, com o alvo de toque inteiro.
Nenhum elemento aqui calcula posição a partir da quantidade. Chips quebram linha, lâminas rolam, cartões de produto entram em grade. O cliente pode criar a família “Terrosos”, a subcategoria “Fachada” e mais trezentas cores que o layout continua o mesmo — e o vínculo com o produto é só um campo na cor dizendo em quais linhas ela existe.